<template>
    <div class="main"
         ref="main"
    >
        <div class="title" ref="title"></div>
        <div class="content" ref="content"></div>
        <div class="date" ref="date"></div>
        <div class="selectRadio" v-if="selectActive">✔</div>
    </div>
</template>

<script>

export default {
    name: "Note",

    props: {
        id: {
            type: String,
            required: true
        },

        content: {
            type: String,
            required: true
        },

        timeStamp: {
            type: String,
            required: true
        }
    },

    data() {
        return {
            selectActive: false,
            selected: false
        }
    },

    methods: {
        // 手按下（起始）
        touchstart() {
            const self = this
            this.timeOutEvent = setTimeout(function () {
                this.timeOutEvent = 0
                self.longPress()
            }, 300) //这里设置定时器，定义长按500毫秒触发长按事件
            return false
        },

        // 手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
        touchend() {
            clearTimeout(this.timeOutEvent) //清除定时器
            if (this.timeOutEvent) {
                //这里写要执行的内容（如onclick事件）
                this.click()
            }
            return false
        },

        // 如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
        touchmove() {
            clearTimeout(this.timeOutEvent) //清除定时器
            this.timeOutEvent = 0
        },

        // 点击事件
        click() {
            if (this.selectActive) {
                const main = this.$(this.$refs.main)
                if (this.selected) main.removeClass("selected")
                else main.addClass("selected")
                this.selected = !this.selected
            } else this.$emit("click", this.id)
        },

        // 长按事件
        longPress() {
            this.selectActive = true
            this.$emit("longPress")
        },
    },

    mounted() {
        // 填充 标题 和 内容
        // 将富文本html代码提取出文字
        const ele = document.createElement("div")
        let content = this.$(ele).html(this.content).text()
        let title = content.slice(0, 8)
        content = content.slice(8, content.length)
        if (title.includes("\\n")) {
            const n = title.split("\\n")
            title = n[0]
            content = title[1] + content
        }
        this.$refs.title.innerText = title
        this.$refs.content.innerText = content

        // 填充日期
        this.$refs.date.innerText = `${this.$public.formatTimeStampToYYMMDD(this.timeStamp)} | ${this.$public.formatTimeStampToHHmm(this.timeStamp)}`

        // 为组件绑定 点击/长按 事件
        const main = this.$(this.$refs.main)
        main.bind({
            mousedown: () => {
                this.touchstart()
            },
            mousemove: () => {
                this.touchmove()
            },
            mouseup: () => {
                this.touchend()
            },
            touchstart: () => {
                event.preventDefault(main)
                this.touchstart()
            },
            touchmove: () => {
                this.touchmove()
            },
            touchend: () => {
                this.touchend()
            }
        })
    }
}
</script>

<style lang="less" scoped>
.main {
    background-color: white;
    margin-bottom: 10px;
    border-radius: 18px;
    box-sizing: border-box;
    padding: 20px;
    break-inside: avoid;
    position: relative;

    .title {
        font-size: 1rem;
        font-weight: bold;
        margin-bottom: 8px;
    }

    .content {
        font-size: 0.8rem;
        font-weight: lighter;
        line-height: 1.4rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        margin-bottom: 15px;
    }

    .date {
        font-size: 0.8rem;
        font-weight: lighter;
    }

    .selectRadio {
        width: 1.4rem;
        height: 1.4rem;
        position: absolute;
        bottom: 1.05rem;
        right: 1rem;
        border-radius: 100%;
        font-weight: bold;
        font-size: 0.9rem;
        line-height: 1.4rem;
        text-align: center;
        color: transparent;
        background-color: #EBEBEB;
        animation: selectRadio 0.3s;
    }
}

.selected {
    background-color: #EBEBEB;

    .selectRadio {
        background-color: var(--color);
        color: white;
    }
}

@keyframes selectRadio {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
    }

    100% {
        width: 1.6rem;
        height: 1.6rem;
        opacity: 1;
    }
}
</style>
